import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Card, Row, Col, Form, Button, Spin, Modal, Steps, Table, message as msg, Checkbox} from 'antd';
import {FORM_OPTIONS, PAGE, TABLE, FORM_ROW_OPTIONS, FIXED_COLUMN_WIDTH} from '../constants';
import {formatMessage, injectIntl} from './intl';
import WrappedSelect from '../common/WrappedSelect';
import WrappedSingleSelect from '../common/WrappedSingleSelect';
import {getUpdateList} from './api';
import styles from './style.css';
import DealerSelectPanel from '../common/DealerSelect/SelectEdit';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import {conventEnumValueToString, formatAmount} from '../utils';
import {dutyUnitType, faultType} from '../Enum';
import FaultItemSelectPanel from '../common/FaultItemSelect/SelectEdit';
import PartSelectPanel from './PartSelectPanel';
import PartAssistPanel from './PartAssistPanel';
import WorkItemTablePanel from './WorkItemTablePanel';
import WorkItemSelectPanel from './WorkItemSelectPanel';
import DutyUnit from '../common/DutyUnitSelect/SelectEdit';
import routes from './routes';
import TextInput from 'Shared/components/TextInput';
import {computeSelectedRows, validateAdd} from './utils';
const FormItem = Form.Item;
const Step = Steps.Step;
const supplierCondition = {
    type: dutyUnitType.索赔供应商,
};
const dutyUnitCondition = {
    type: dutyUnitType.责任单位,
};
const width = {
    width: '100%'
};
class MoreUpdatePanel extends Component {
    state = {
        queryCondition: {
            dealerId: '',
            brandId: '',
            causePartCode: '',
            causePartName: '',
            productCategoryCode: '',
            faultItemId: '',
        },
        data: [],
        isFetching: false,
        hasOperat: false,
        currentStep: 0,
        selectedRowKeys: [],
        selectedRows: [],
        currentCondition: {},
        showPanel: false,
        showPart: false,
        loading: false,
        showWorkItem: false
    };
    componentWillUnmount() {
        this.ismounted = true;
    }
    handleFilterPressEnter = (value, name) => {
        this.setState({[name]: value}, this.onClickSearchBtn);
    }
    dutyUnitLabelMap = d => {
        if(d.id === undefined)
            return '';
        if(d)
            return `(${d.code})${d.name}`;
        return '';
    }
    handleFilterChange = (value, name) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                [name]: value,
            },
            hasOperat: true
        });
    };
    showPanel = () => {
        this.setState({
            showPanel: !this.state.showPanel
        });
    };
    showPart = () => {
        this.setState({
            showPart: !this.state.showPart
        });
    };
    onClickSearchBtn = () => {
        const {dealerCode, dealerName, faultItemCode, faultItemName, ...props} = this.state.queryCondition;
        if(!props.brandId)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.brandId',
                defaultMessage: '请选择品牌'
            }));
        if(!props.dealerId)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.dealerId',
                defaultMessage: '请选择总代'
            }));
        if(!props.causePartCode)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.causePartCode',
                defaultMessage: '请选择主因件编号'
            }));
        if(!props.productCategoryCode)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.productCategoryCode',
                defaultMessage: '请选择车型编号'
            }));
        const condition = {
            ...props,
            pageIndex: PAGE.index,
            pageSize: this.state.pageSize,
            sortField: this.state.sortField,
            isDesc: this.state.isDesc
        };
        this.onQuery(condition);
    }
    onQuery = condition => {
        this.setState({isFetching: true});
        getUpdateList(condition)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        message: '',
                        data: res.data.content,
                        currentCondition: condition
                    });
                else
                    this.setState({
                        isFetching: false,
                        data: [],
                        message: res.message
                    });
            });
    }
    onPageIndexChange = current => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = current - 1;
        this.onQuery(condition);
    }
    onPageSizeChange = (current, pageSize) => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = PAGE.index;
        condition.pageSize = pageSize;
        this.onQuery(condition);
        this.setState({
            pageSize
        });
    }
    onClickReturnBtn = () => {
        this.props.history.push(routes.query.url());
    };
    onSelectDealer = (data = {}) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                dealerId: data.id,
                dealerCode: data.code,
                dealerName: data.name,
            },
            hasOperat: true
        });
    }
    onClickFaultItem = (data = {}) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                faultItemId: data.id,
                faultItemCode: data.code,
                faultItemName: data.name,
            },
            hasOperat: true
        });
    }
    onClickNextStep = () => {
        this.setState({
            currentStep: this.state.currentStep + 1,
            isFetching: false
        });
        this.props.init({
            id: this.state.selectedRowKeys
        }, this.state.queryCondition.productCategoryCode, this.state.queryCondition.brandId);
    };
    onClickPrevStep = () => {
        Modal.confirm({
            title: formatMessage({
                id: 'moreApprovePanel.prevStep.confim.title',
                defaultMessage: '切换到上一步'
            }),
            content: formatMessage({
                id: 'moreApprovePanel.prevStep.confim.content',
                defaultMessage: '切换到上一步，将会清空当前清单数据，是否继续？'
            }),
            onOk: () => {
                this.setState({
                    currentStep: this.state.currentStep - 1,
                    data: [],
                    selectedRowKeys: [],
                    selectedRows: [],
                });
            }
        });
    };
    onSubmit = () => {
        const result = validateAdd(this.props.conditions);
        if(result) {
            this.setState({
                isValidate: true
            });
            return msg.warn(result);
        }
        Modal.confirm({
            title: this.props.intl.formatMessage({
                id: 'moreApprovePanel.message.switch1',
                defaultMessage: '提示'
            }),
            content: this.props.intl.formatMessage({
                id: 'moreApprovePanel.message.claim',
                defaultMessage: '是否将选择的索赔单调整为一致'
            }),
            onOk: () => {
                this.onSubmitClaim();
            }
        });
    }
    onSubmitClaim = () => {
        this.setState({
            loading: true
        });
        this.props.onSubmit().then(success => {
            if(!success)
                this.setState({
                    loading: false
                });
            if(this.ismounted)
                this.setState({
                    loading: false
                });
        });
    };
    onClickAddAccessory = () => {
        this.setState({
            hasOperat: true,
            showPanel: true,
        });
    }
    onClickAddPart = () => {
        this.setState({
            hasOperat: true,
            showPart: true
        });
    }
    onClickAddAccessory = () => {
        this.setState({
            hasOperat: true,
            showPanel: true,
        });
    }
    onClickAddPart = () => {
        this.setState({
            hasOperat: true,
            showPart: true
        });
    }
    onDeletePart = e => {
        const {id} = e.target.dataset;
        this.setState({
            hasOperat: true,
        });
        this.props.onDeletePart(id);
    }
    onDeleteAllPart = () => {
        this.setState({
            hasOperat: true,
        });
        this.props.onDeleteAllPart();
    }
    onDeleteAccessoryPart = e => {
        const {id} = e.target.dataset;
        this.setState({
            hasOperat: true,
        });
        this.props.onDeleteAccessoryPart(id);
    }
    onDeleteAllAccessoryPart = () => {
        this.setState({
            hasOperat: true,
        });
        this.props.onDeleteAllAccessoryPart();
    }
    onChangeQty = (value, id) => {
        this.setState({
            hasOperat: true,
        });
        this.props.onUpdatePart({
            id,
            quantity: value,
        });
    }
    onChangeAccessQty = (value, id) => {
        this.setState({
            hasOperat: true,
        });
        this.props.onUpdateAccessoryPart({
            id,
            quantity: value,
        });
    }
    onSelectPart = data => {
        this.setState({showPart: false});
        this.props.onSelectPart(data);
        this.props.onSelectWorkItem(data);
    }
    onSelectAccessory = data => {
        this.setState({showPanel: false});
        this.props.onSelectAccessory(data);
    }

    onSelectSupplier = data => {
        this.setState({
            hasOperat: true,
        });
        this.props.onSelectSupplier(data);
    }

    onSelectDutyUnit = data => {
        this.setState({
            hasOperat: true,
        });
        this.props.onSelectDutyUnit(data);
    }
    onChangeBox = e => {
        const {checked, id} = e.target;
        this.setState({
            hasOperat: true,
        });
        this.props.onChangeCause(id, checked);
    }
    onClickAddWorkItem = e => {
        e.stopPropagation();
        const {details = []} = this.props.conditions;
        if(!details.some(d => d.isCaused === true))
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.isCaused',
                defaultMessage: '请选择一个材料为主损件'
            }));
        this.setState({showWorkItem: true});
    }
    onCloseWorkItem = () => {
        this.setState({showWorkItem: false});
    }
    onSelectWorkItem = data => {
        this.setState({showWorkItem: false});
        this.props.onSelectWorkItemQuery(data);
    }
    onDeleteWorkItem = id => {
        this.setState({
            hasOperat: true,
        });
        this.props.onDeleteWorkItem(id);
    };
    onDeleteAllWorkItem = () => {
        this.setState({
            hasOperat: true,
        });
        this.props.onDeleteAllWorkItem();
    };
    onWorkItemLaborHourChange = (id, value) => {
        this.setState({
            hasOperat: true,
        });
        this.props.onUpdateWorkItemlaborHour({
            id,
            laborHour: value,
        });
    }
    onWorkItemLaborPriceChange = (id, value) => {
        this.setState({
            hasOperat: true,
        });
        this.props.onUpdateWorkItemlaborPrice({
            id,
            laborPrice: value,
        });
    }
    render() {
        const {details = [], accessoryDetails = [], repairDate, workItemDetails = []} = this.props.conditions;
        const partIds = details.map(v => v.usedPartId);
        const {queryCondition, isFetching, data, selectedRowKeys} = this.state;
        const dealerInfo = queryCondition.dealerId ? {
            id: queryCondition.dealerId,
            code: queryCondition.dealerCode,
            name: queryCondition.dealerName,
        } : null;
        const faultItemInfo = queryCondition.faultItemId ? {
            id: queryCondition.faultItemId,
            code: queryCondition.faultItemCode,
            name: queryCondition.faultItemName
        } : null;
        const supplierInfo = this.props.conditions.supplierId ? {
            id: this.props.conditions.supplierId,
            code: this.props.conditions.supplierCode,
            name: this.props.conditions.supplierName
        } : null;
        const dutyUnitInfo = this.props.conditions.dutyUnitId ? {
            id: this.props.conditions.dutyUnitId,
            code: this.props.conditions.dutyUnitCode,
            name: this.props.conditions.dutyUnitName
        } : null;
        const claimColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.code',
                    defaultMessage: '保修单号'
                }),
                dataIndex: 'code',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.causePartCode',
                    defaultMessage: '主因件编号'
                }),
                sorter: true,
                dataIndex: 'causePartCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.causePartName',
                    defaultMessage: '主因件名称'
                }),
                dataIndex: 'causePartName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.isKd',
                    defaultMessage: 'CBU/KD'
                }),
                dataIndex: 'isKd',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultType',
                    defaultMessage: '故障类型'
                }),
                dataIndex: 'faultType',
                render: text => conventEnumValueToString(faultType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultModeName',
                    defaultMessage: '故障原因'
                }),
                dataIndex: 'faultModeName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultItemName',
                    defaultMessage: '故障代码'
                }),
                dataIndex: 'faultItemName'
            }
        ];
        const columnMaterials = [
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                render: (text, record) => (
                    <FormItem>
                        <Checkbox id={record.usedPartId} checked={record.isCaused} onChange={this.onChangeBox} />
                    </FormItem>
                )
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.unit',
                    defaultMessage: '计量单位'
                }),
                dataIndex: 'unit'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                render: (text, record) => (
                    <FormItem validateStatus={this.state.isValidate && !record.quantity ? 'error' : null}
                        required>
                        <LocalizeInputNumber
                            min={0}
                            precision={record.isDecimalAllowed ? 3 : 0}
                            style={width}
                            id={record.usedPartId}
                            value={record.quantity}
                            onChange={this.onChangeQty} />
                    </FormItem>
                )
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialTablePanel.materialFee',
                    defaultMessage: '材料费合计'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: (text, record) => {
                    const {price = 0, quantity = 0} = record;
                    return formatAmount(price * quantity);
                }
            },

            {
                title: details.length ? (
                    <WrappedPopconfirm
                        id="delete"
                        title={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.message',
                            defaultMessage: '是否继续?'
                        })}
                        okText={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.confirm',
                            defaultMessage: '确认'
                        })}
                        cancelText={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.cancel',
                            defaultMessage: '取消'
                        })}
                        onConfirm={this.props.onDeleteAllPart}>
                        <a>
                            {this.props.intl.formatMessage({
                                id: 'moreApprovePanel.deleteAll',
                                defaultMessage: '清空'
                            })}
                        </a>
                    </WrappedPopconfirm>
                ) : (
                    <a>
                        {this.props.intl.formatMessage({
                            id: 'moreApprovePanel.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>
                ),
                dataIndex: 'action',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => <a onClick={this.onDeletePart} key="delete" data-id={record.usedPartId} data-applyid={record.claimId}>
                    {this.props.intl.formatMessage({
                        id: 'moreApprovePanel.delete',
                        defaultMessage: '删除'
                    })}
                </a>
            }
        ];
        const colums = [
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.unit',
                    defaultMessage: '计量单位'
                }),
                dataIndex: 'unit'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
                render: (text, record) => (
                    <FormItem validateStatus={this.state.isValidate && !record.quantity ? 'error' : null}
                        required>
                        <LocalizeInputNumber
                            min={0}
                            precision={record.isDecimalAllowed ? 3 : 0}
                            style={width}
                            id={record.usedPartId}
                            value={record.quantity}
                            onChange={this.onChangeAccessQty} />
                    </FormItem>
                )
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.materialFee',
                    defaultMessage: '辅料费合计'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: (text, record) => {
                    const {price = 0, quantity = 0} = record;
                    return formatAmount(price * quantity);
                }
            },
            {
                title: details.length ? (
                    <WrappedPopconfirm
                        id="delete"
                        title={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.message',
                            defaultMessage: '是否继续?'
                        })}
                        okText={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.confirm',
                            defaultMessage: '确认'
                        })}
                        cancelText={this.props.intl.formatMessage({
                            id: 'moreApprovePanel.popconfirm.cancel',
                            defaultMessage: '取消'
                        })}
                        onConfirm={this.props.onDeleteAllAccessoryPart}>
                        <a>
                            {this.props.intl.formatMessage({
                                id: 'moreApprovePanel.deleteAll',
                                defaultMessage: '清空'
                            })}
                        </a>
                    </WrappedPopconfirm>
                ) : (
                    <a>
                        {this.props.intl.formatMessage({
                            id: 'moreApprovePanel.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>
                ),
                dataIndex: 'action',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => <a onClick={this.onDeleteAccessoryPart} key="delete" data-id={record.usedPartId} data-applyid={record.claimId}>
                    {this.props.intl.formatMessage({
                        id: 'moreApprovePanel.delete',
                        defaultMessage: '删除'
                    })}
                </a>
            }
        ];
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                const rows = computeSelectedRows(this.state.selectedRowKeys, this.state.selectedRows, selectedRowKeys, selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows: rows
                });
            }
        };
        const updateComp = (
            <Form className="form-standard">
                <Card>
                    <Row>
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem
                                validateStatus={this.state.isValidate && !this.props.conditions.supplierId ? 'error' : null}
                                required
                                label={this.props.intl.formatMessage({
                                    id: 'queryPanel.form.supplierId',
                                    defaultMessage: '供应商'
                                })}
                                {...FORM_OPTIONS.item}>
                                <DutyUnit
                                    value={supplierInfo}
                                    allowClear={false}
                                    conditions={supplierCondition}
                                    onSelect={this.onSelectSupplier} />
                            </FormItem>
                        </Col>
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem
                                validateStatus={this.state.isValidate && !this.props.conditions.dutyUnitId ? 'error' : null}
                                required
                                label={this.props.intl.formatMessage({
                                    id: 'queryPanel.form.dutyUnitId',
                                    defaultMessage: '责任单位'
                                })}
                                {...FORM_OPTIONS.item}>
                                <DutyUnit
                                    value={dutyUnitInfo}
                                    allowClear={false}
                                    conditions={dutyUnitCondition}
                                    onSelect={this.onSelectDutyUnit} />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.form.faultItem',
                                    defaultMessage: '故障代码'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <span className="value-font">{this.props.conditions.faultItemName}</span>
                            </FormItem>
                        </Col></Row>
                </Card>
            </Form>
        );
        const steps = [
            {
                title: formatMessage({
                    id: 'moreApprovePanel.steps.1.title',
                    defaultMessage: '查询可审核索赔单'
                }),
                content: (
                    <div>
                        <Card className="form-standard">
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.dealerId',
                                            defaultMessage: '总代'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <DealerSelectPanel
                                            value={dealerInfo}
                                            onSelect={this.onSelectDealer} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.brandId',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="brandId"
                                            value={queryCondition.brandId}
                                            options={this.props.brands}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem class={styles.multiLabel}
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.causePartCode',
                                            defaultMessage: '主损件编号'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="causePartCode"
                                            value={queryCondition.causePartCode}
                                            onPressEnter={this.handleFilterPressEnter}
                                            onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem class={styles.multiLabel}
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.causePartName',
                                            defaultMessage: '主损件名称'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="causePartName"
                                            value={queryCondition.causePartName}
                                            onPressEnter={this.handleFilterPressEnter}
                                            onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.productCategoryCode',
                                            defaultMessage: '车型编号'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSingleSelect
                                            name="productCategoryCode"
                                            value={queryCondition.productCategoryCode}
                                            options={this.props.categories}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.faultItemId',
                                            defaultMessage: '故障代码'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <FaultItemSelectPanel
                                            value={faultItemInfo}
                                            onSelect={this.onClickFaultItem} />
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col {...FORM_OPTIONS.col} className={styles['inline-button']}>
                                    <Button
                                        type="primary"
                                        loading={isFetching}
                                        onClick={this.onClickSearchBtn}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.btn.query',
                                            defaultMessage: '查询'
                                        })}
                                    </Button>
                                    <Button key="clear" onClick={this.onClickReset}>{formatMessage({
                                        id: 'moreApprovePanel.btn.reset',
                                        defaultMessage: '重置'
                                    })}</Button>
                                </Col>
                            </Row>
                        </Card>
                        <Card>
                            <Table
                                className="white-space-nowrap"
                                rowKey="id"
                                columns={claimColumns}
                                pagination={false}
                                dataSource={data}
                                rowSelection={rowSelection}
                                {...TABLE} />
                        </Card>
                        <Card className={styles.optionBtn}>
                            <Button
                                disabled={!selectedRowKeys.length}
                                type="primary"
                                onClick={this.onClickNextStep}>
                                {formatMessage({
                                    id: 'btn.nextStep',
                                    defaultMessage: '下一步'
                                })}
                            </Button>
                        </Card>
                    </div>
                )
            },
            {
                title: formatMessage({
                    id: 'moreApprovePanel.steps.2.title',
                    defaultMessage: '批量调整'
                }),
                content: (
                    <React.Fragment>
                        <Spin spinning={this.props.isFetching || this.state.loading}>
                            {updateComp}
                            <Form className="form-standard">
                                <Card
                                    extra={<Button onClick={this.onClickAddPart} size="small">
                                        {this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.btn.add',
                                            defaultMessage: '新增'
                                        })}
                                    </Button>}
                                    title={this.props.intl.formatMessage({
                                        id: 'moreApprovePanel.table.claimMaterialDetails',
                                        defaultMessage: '材料清单'
                                    })}>
                                    <Table
                                        className="white-space-nowrap"
                                        columns={columnMaterials}
                                        rowKey="usedPartId"
                                        pagination={false}
                                        dataSource={details}
                                        {...TABLE} />
                                </Card>
                                <Card
                                    extra={<Button onClick={this.onClickAddWorkItem} size="small">
                                        {this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.btn.newWorkItem',
                                            defaultMessage: '新增项目'
                                        })}
                                    </Button>}
                                    title={this.props.intl.formatMessage({
                                        id: 'moreApprovePanel.table.workItemDetails',
                                        defaultMessage: '项目清单'
                                    })}>
                                    <WorkItemTablePanel
                                        onDeleteWorkItem={this.onDeleteWorkItem}
                                        onDeleteAllWorkItem={this.onDeleteAllWorkItem}
                                        onWorkItemLaborHourChange={this.onWorkItemLaborHourChange}
                                        onWorkItemLaborPriceChange={this.onWorkItemLaborPriceChange}
                                        data={workItemDetails}/>
                                </Card>
                                <Card
                                    extra={<Button onClick={this.onClickAddAccessory} size="small">
                                        {this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.btn.add',
                                            defaultMessage: '新增'
                                        })}
                                    </Button>} title={this.props.intl.formatMessage({
                                        id: 'moreApprovePanel.table.accessoryDetails',
                                        defaultMessage: '辅料清单'
                                    })}>
                                    <Table
                                        className="white-space-nowrap"
                                        columns={colums}
                                        rowKey="usedPartId"
                                        pagination={false}
                                        dataSource={accessoryDetails}
                                        {...TABLE} />
                                </Card>
                                <Card className={styles.optionBtn}>
                                    <Button
                                        type="primary"
                                        onClick={this.onClickPrevStep}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.btn.prevStep',
                                            defaultMessage: '上一步'
                                        })}
                                    </Button>
                                    <Button
                                        type="primary"
                                        onClick={this.onSubmit}
                                        loading={this.props.isFetching}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.btn.submit',
                                            defaultMessage: '确认'
                                        })}
                                    </Button>
                                </Card>
                            </Form>
                        </Spin>
                    </React.Fragment>
                )
            }
        ];
        return (
            <div>
                {this.state.showPart && <PartSelectPanel
                    brandId={queryCondition.brandId}
                    dealerId={queryCondition.dealerId}
                    repairDate={this.props.conditions.repairDate}
                    productCategoryCode={queryCondition.productCategoryCode}
                    currentSelectRowkeys={details}
                    onSelect={this.onSelectPart}
                    onCancel={this.showPart} />}
                {this.state.showPanel && <PartAssistPanel
                    brandId={queryCondition.brandId}
                    dealerId={queryCondition.dealerId}
                    currentSelectRowkeys={accessoryDetails}
                    selectKey={data.id}
                    partIds={partIds}
                    repairDate={repairDate}
                    productCategoryCode={queryCondition.productCategoryCode}
                    onSelect={this.onSelectAccessory}
                    onCancel={this.showPanel} />}
                {
                    this.state.showWorkItem &&
                    <WorkItemSelectPanel
                        currentSelectRowkeys={workItemDetails}
                        brandId={queryCondition.brandId}
                        productCategoryCode={queryCondition.productCategoryCode}
                        selectKey={data.id}
                        onCancel={this.onCloseWorkItem}
                        onSelect={this.onSelectWorkItem} />
                }
                <Card className="card-full-width">
                    <Steps current={this.state.currentStep}>
                        {steps.map(item => (
                            <Step key={item.title} title={item.title} />
                        ))}
                    </Steps>
                </Card>
                {steps[this.state.currentStep].content}
            </div>
        );
    }
}

MoreUpdatePanel.propTypes = {
    onSelectAccessory: PropTypes.func.isRequired,
    onSelectPart: PropTypes.func.isRequired,
    brands: PropTypes.array,
    categories: PropTypes.array,
    history: PropTypes.object,
    pagePermission: PropTypes.array,
    refreshListData: PropTypes.func,
};


const EMPTY_ARRAY = [];
import {
    tableSearch,
    onSubmitMore,
    getMoreDetail,
    selectAccessoryPartMore,
    selectPartMore,
    deleteAllPartMore,
    deleteAllAccessoryPartMore,
    deletePartMore,
    deleteAccessoryPartMore,
    updatePartMore,
    updateAccessoryPartMore,
    changeCauseMore,
    selectWorkItemMore,
    deleteWorkItemMore,
    deleteAllWorkItemMore,
    onSelectWorkItemQueryMore,
    updateWorkItemlaborHourMore,
    updateWorkItemlaborPriceMore,
    selectSupplierMore,
    selectDutyUnitMore
} from './actions';
import {createSelector} from 'reselect';
import {connect} from 'react-redux';
import {selectorFactory} from 'Shared/utils/immutableToJsSelectorFactory';
const getSubmitData = selectorFactory(['page', 'appState', 'submitMoreData']);
const getBrands = createSelector(
    state => state.getIn(['page', 'domainData', 'brands', 'data']),
    brands => {
        const data = brands.toJS() || EMPTY_ARRAY;
        return data.map(item => ({
            value: item.id,
            text: item.name
        }));
    }
);
const getCategoryData = createSelector(
    state => state.getIn(['page', 'domainData', 'category']),
    init => {
        const initData = init.toJS();
        const categories = initData.data ? initData.data.map(item => ({
            text: item.code,
            value: item.code
        })) : [];
        return categories;
    }
);

const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    brands: getBrands(state),
    categories: getCategoryData(state),
    isFetching: state.getIn(['page', 'domainData', 'detailMore', 'isFetching']),
    conditions: getSubmitData(state)
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    onSubmit: () =>
        dispatch(onSubmitMore(ownProps.id, ownProps.isSubmit)).then(res => {
            if(res.ok) {
                dispatch(tableSearch({
                    pageIndex: PAGE.index
                }));
                ownProps.history.push(routes.query.url());
            }
            return res.ok;
        }),
    init: (data, productCategoryCode, brandId) => dispatch(getMoreDetail(data, productCategoryCode, brandId)),
    onSelectAccessory: data => dispatch(selectAccessoryPartMore(data)),
    onSelectPart: data => dispatch(selectPartMore(data)),
    onDeletePart: id => dispatch(deletePartMore(id)),
    onDeleteAccessoryPart: id => dispatch(deleteAccessoryPartMore(id)),
    onDeleteAllPart: () => dispatch(deleteAllPartMore()),
    onDeleteAllAccessoryPart: () => dispatch(deleteAllAccessoryPartMore()),
    onUpdatePart: data => dispatch(updatePartMore(data)),
    onUpdateAccessoryPart: data => dispatch(updateAccessoryPartMore(data)),
    onChangeCause: (id, value) => dispatch(changeCauseMore(id, value)),
    onSelectWorkItem: data => dispatch(selectWorkItemMore(data)),
    onDeleteWorkItem: id => dispatch(deleteWorkItemMore(id)),
    onDeleteAllWorkItem: () => dispatch(deleteAllWorkItemMore()),
    onSelectWorkItemQuery: data => dispatch(onSelectWorkItemQueryMore(data)),
    onUpdateWorkItemlaborHour: data => dispatch(updateWorkItemlaborHourMore(data)),
    onUpdateWorkItemlaborPrice: data => dispatch(updateWorkItemlaborPriceMore(data)),
    onSelectSupplier: data => dispatch(selectSupplierMore(data)),
    onSelectDutyUnit: data => dispatch(selectDutyUnitMore(data)),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(MoreUpdatePanel));
